<template>
	<view class="containner">
		<view class="title"><text class="t1">{{ t1 }}</text>{{ t2 }}刷题中...</view>
		<view class="tabs">
			<u-tabs :list="tabs" @click="handleClickTab" lineColor="#575757" :lineHeight="4"></u-tabs>
		</view>
		<view class="box">
			<view class="check-all" :class="{'active':checkAll}" @click="handleClickAll">全选</view>
			<view class="list" v-if="!isEmpty">
				<view class="item" :class="{'active':item.active}" v-for="(item,index) in list" :key="index" @click="handleClickItem(item)">
					<image :src="item.course_image || defaultImg" class="icon"></image>
					<view class="name" :class="{'only-name': type == 1 }">{{ item.course_name }}</view>
					<view class="wrong-num" v-if="type == 2 ">错题数目：<text class="red">{{ item.error_question_count }}</text> 个</view>
					<view class="select-icon">
						<template v-if="!item.active"><u--image  :showLoading="true" :src="src1" width="80rpx" height="80rpx"></u--image></template>
						<template v-else><u--image  :showLoading="true" :src="src2" width="80rpx" height="80rpx"></u--image></template>
					</view>
					
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="isEmpty"></u-empty>
		</view>
		<view class="toolbar">
			<view class="start-button" @click="toAnswer">开始刷题</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [],
				list: [],
				t1:'',
				t2:'',
				checkAll:false,
				type:1,
				isEmpty:false,
				src1: 'http://qiniu.disciplineeducation.com/studyIcons/unselect.png',
				src2: 'http://qiniu.disciplineeducation.com/studyIcons/selected.png',
				defaultImg:'http://qiniu.disciplineeducation.com/studyIcons/Bicycle%20.png'
			}
		},
		onShareAppMessage(res){
			return this.$utils.onShareAppMessage();
		},
		onLoad(options) {
			this.type = options.type;
			if(this.type == 1){
				this.t1 ='物';
				this.t2 ='理';
				uni.setNavigationBarTitle({
					title: '物理刷题'
				})
			}
			if(this.type == 2){
				this.t1 ='错';
				this.t2 ='题';
				uni.setNavigationBarTitle({
					title: '错题刷题'
				})
			}
			this.getList();
		},
		methods: {
			async getList() {
				const res = await this.$http.get(`/wechatmini`)
				if(res.code == 0){
					let tabs = [];
					res.data.course_levels.forEach(item=>{
						tabs.push({name:item.course_level_name,id:item.course_level_id})
					})
					this.tabs = tabs;
					if(this.type == 1){
						this.getBrushList(tabs[0].id)
					}
					if(this.type == 2){
						this.getWrongList(tabs[0].id)
					}
					
				}
			
			},
			async getWrongList(id){
				const res = await this.$http.get(`/wechatmini/error-question/courses?course_level_id=${id}`)
				if(res.code == 0){
					res.data.list.forEach(item=>{
						item['active'] = false;
					})
					this.list = res.data.list;
					if(this.list.length === 0){
						this.isEmpty = true
					}else{
						this.isEmpty = false
					}
				}
			},
			async getBrushList(id){
				const res = await this.$http.get(`/wechatmini/brush-question/courses?course_level_id=${id}`)
				if(res.code == 0){
					res.data.list.forEach(item=>{
						item['active'] = false;
					})
					this.list = res.data.list;
				}
			},
			handleClickTab(item) {
				if(this.type == 1){
					this.getBrushList(item.id)
				}
				if(this.type == 2){
					this.getWrongList(item.id)
				}
				this.checkAll = false
			},
			handleClickItem(item){
				item['active'] = !item['active'];
				let hasNoCheck = this.list.some(ite=>{
					return !ite.active;
				})
				if(hasNoCheck){
					this.checkAll = false;
				}else{
					this.checkAll = true;
				}
			},
			handleClickAll(){
				this.checkAll = !this.checkAll;
				this.list.forEach(item=>{
					item.active = this.checkAll;
				})
			},
			toAnswer(){
				
				let list = [];
				this.list.forEach(item=>{
					if(item.active){
						list.push(item.course_id)
					}
				})
				if(list.length === 0){
					uni.showToast({
						icon:'none',
						title:'请选择要刷的题型'
					})
					return false;
				}
				let sourceType = this.type == 1 ? 'brush' : 'wrong'
				uni.navigateTo({
					url:`/pages/answer/index?source=2&sourceType=${ sourceType }&ids=`+list.join(',')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.containner{
		overflow:hidden
	}
.title{
	font-size:32rpx;
	font-weight: bold;
	color:#575757;
	padding:40rpx;
	font-style: italic;
	letter-spacing: 2rpx;
	.t1{
		font-size:50rpx
	}
}
.box{
	margin:30rpx;
	background-color: #d7e9e4;
	border-radius:40rpx;
	padding-bottom: 30rpx;
	.check-all{
		position: relative;
		z-index:88;
		background-color: #d7e9e4;
		color:#344b45;
		width:80rpx;
		height:50rpx;
		line-height:50rpx;
		text-align: center;
		margin:0 auto;
		top:-20rpx;
		border:10rpx solid #d7e9e4
	}
	.check-all.active{
		background-color: #fff;
	}
	.list{
		margin:0 40rpx;
		height:70vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling:touch;
		.item{
			height:200rpx;
			position: relative;
			margin-bottom:30rpx;
			border-radius:40rpx;
			background-color: #ebf4f2;
			text-align: center;
			border:6rpx solid #ebf4f2;
			.name{
				color:#575757;
				width:250rpx;
				margin:0 auto;
				margin-top:36rpx;
			}
			.name.only-name{
				height:200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top:0;
			}
			.wrong-num{
				color:#b1d7cc;
				margin-top:30rpx;
				.red{
					color:#c73dc5
				}
			}
			.select-icon{
				position: absolute;
				right:30rpx;
				top:60rpx
			}
			.icon{
				position: absolute;
				left:30rpx;
				top:60rpx;
				width:117rpx;
				height:66rpx;
			}
		}
		.item.active{
			border:6rpx solid #9ddab7;
			background-color: #f7fbfa;
		}
	}
	
}
.toolbar{
		position: fixed;
		width:100%;
		bottom:30rpx;
		left:0;
		.start-button{
			background-color: #ddbef1;
			height:80rpx;
			line-height: 80rpx;
			width:60%;
			margin:0 auto;
			border-radius:50rpx;
			color:#fff;
			text-align: center;
		}
		
	}
</style>
